Skip to content

Commit d792471

Browse files
upload notes
1 parent 90e04f7 commit d792471

File tree

7 files changed

+357
-13
lines changed

7 files changed

+357
-13
lines changed

README.md

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,24 @@
11
# TypeScript Notes
22

3-
tsc --watch FILENAME
3+
_Create a tsconfig.json_
44
tsc --init
55

6-
To use TypeScript with `create-react-app`
7-
npx create-react-app PROJECT_NAME --template typscript // if you want to creater a new directory
6+
_Compile ts file into js file_
7+
tsc FILENAME
8+
9+
_Run in watch mode_
10+
tsc --watch FILENAME
11+
12+
_Use TypeScript with `create-react-app`_
13+
14+
- if you want to creater a new directory
15+
`npx create-react-app PROJECT_NAME --template typscript`
16+
817
or
9-
npx create-react-app . --template typescript // if you want to initialize in a currency directory
18+
19+
- if you want to initialize in a currency directory
20+
`npx create-react-app . --template typescript`
21+
22+
Specify the output directory in the tsconfig.json
23+
24+
- In this project, I created a dist directory. I added the filepath to the tsconfig.json as well as the script in index.html

index.js renamed to dist/index.js

File renamed without changes.

index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
<style>
11+
body {
12+
background-color: rgb(49, 49, 49);
13+
color: white;
14+
}
15+
</style>
16+
<div>
17+
<h1>Hi, I'm a heading</h1>
18+
<p>Hi, I'm a paragraph</p>
19+
</div>
20+
21+
<script src="./dist/index.js"></script>
22+
</body>
23+
</html>

package.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "typescript_notes",
3+
"version": "1.0.0",
4+
"description": "tsc --watch FILENAME tsc --init",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/justinTsugranes/typescript_notes.git"
12+
},
13+
"keywords": [],
14+
"author": "justinTsugranes",
15+
"license": "MIT",
16+
"bugs": {
17+
"url": "https://github.com/justinTsugranes/typescript_notes/issues"
18+
},
19+
"homepage": "https://github.com/justinTsugranes/typescript_notes#readme"
20+
}

src/index.js

Lines changed: 286 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,286 @@
1+
// ! Implicit Types - TypeScript will infer the type of the variable
2+
var __extends = (this && this.__extends) || (function () {
3+
var extendStatics = function (d, b) {
4+
extendStatics = Object.setPrototypeOf ||
5+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
6+
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
7+
return extendStatics(d, b);
8+
};
9+
return function (d, b) {
10+
if (typeof b !== "function" && b !== null)
11+
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
12+
extendStatics(d, b);
13+
function __() { this.constructor = d; }
14+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
15+
};
16+
})();
17+
var helloWorld = 'Hello World'; // string
18+
var helloWorld2 = 123; // number
19+
var helloWorld3 = true; // boolean
20+
var helloWorld4 = { name: 'John Doe' }; // object
21+
var helloWorld5 = ['John Doe', 'Jane Doe']; // array
22+
var helloWorld6 = null; // null
23+
var helloWorld7 = undefined; // undefined
24+
var helloWorld8 = Symbol('foo'); // symbol
25+
var helloWorld9 = function () { return 'Hello World'; }; // function
26+
var helloWorld10 = new Date(); // Date
27+
var helloWorld11 = /foo/; // RegExp
28+
var helloWorld12 = new Error(); // Error
29+
var helloWorld13 = [1, 'foo']; // (number | string)[]
30+
var helloWorld14 = [1, 'foo', true]; // (number | string | boolean)[]
31+
var helloWorld15 = [1, 'foo', true, { name: 'John Doe' }]; // (number | string | boolean | object)[]
32+
var helloWorld16 = [
33+
1,
34+
'foo',
35+
true,
36+
{ name: 'John Doe' },
37+
['John Doe', 'Jane Doe'],
38+
]; // (number | string | boolean | object | string[])[]
39+
var helloWorld17 = [
40+
1,
41+
'foo',
42+
true,
43+
{ name: 'John Doe' },
44+
['John Doe', 'Jane Doe'],
45+
null,
46+
]; // (number | string | boolean | object | string[] | null)[]
47+
var helloWorld18 = [
48+
1,
49+
'foo',
50+
true,
51+
{ name: 'John Doe' },
52+
['John Doe', 'Jane Doe'],
53+
null,
54+
undefined,
55+
]; // (number | string | boolean | object | string[] | null | undefined)[]
56+
var helloWorld19 = [
57+
1,
58+
'foo',
59+
true,
60+
{ name: 'John Doe' },
61+
['John Doe', 'Jane Doe'],
62+
null,
63+
undefined,
64+
Symbol('foo'),
65+
]; // (number | string | boolean | object | string[] | null | undefined | symbol)[]
66+
// ! Explicit Types - TypeScript will not infer the type of the variable
67+
// Boolean - this is a boolean
68+
var isCool = true; // this is the best practice
69+
var isPublished = true;
70+
var isLogginIn = false;
71+
// Number - this is a number
72+
var age = 56; // this is the best practice
73+
var id = 5;
74+
var num; // this is fine, although it's not the best practice
75+
num = 5; // because it's not initialized, it's type is 'any'
76+
// String - this is a string
77+
var firstName = 'Justin'; // this is the best practice
78+
var eyeColor = 'brown';
79+
var quote = 'Dodgers Rule!';
80+
// Array
81+
var ids = [1, 2, 3, 4, 5]; // this is the best practice
82+
var pets = ['cat', 'dog', 'pig'];
83+
var pets2 = ['lion', 'dragon', 'lizard']; // this is fine, although it's not the best practice
84+
var x = ['hello', 10]; // this is the best practice
85+
var person = [1, 'Justin', true]; // this is the best practice
86+
var basket; // this is fine, although it's not the best practice
87+
basket = ['basketball', 5]; // this is fine, although it's not the best practice
88+
// Tuple Array - this is an array of tuples
89+
var employee;
90+
employee = [
91+
[1, 'Justin'],
92+
[2, 'John'],
93+
[3, 'Jupiter'],
94+
];
95+
// Enum - this is a variable that can be multiple types but you can assign names to the types
96+
var Size;
97+
(function (Size) {
98+
Size[Size["Small"] = 1] = "Small";
99+
Size[Size["Medium"] = 2] = "Medium";
100+
Size[Size["Large"] = 3] = "Large";
101+
})(Size || (Size = {}));
102+
var sizeName = Size[2];
103+
var Continents;
104+
(function (Continents) {
105+
Continents[Continents["North_America"] = 0] = "North_America";
106+
Continents[Continents["South_America"] = 1] = "South_America";
107+
Continents[Continents["Europe"] = 2] = "Europe";
108+
Continents[Continents["Asia"] = 3] = "Asia";
109+
Continents[Continents["Africa"] = 4] = "Africa";
110+
Continents[Continents["Australia"] = 5] = "Australia";
111+
Continents[Continents["Antarctica"] = 6] = "Antarctica";
112+
})(Continents || (Continents = {}));
113+
var region = Continents.Antarctica; // 6
114+
var Continents2;
115+
(function (Continents2) {
116+
Continents2["NorthAmerica"] = "North America";
117+
Continents2["SouthAmerica"] = "South America";
118+
Continents2["Europe"] = "Europe";
119+
Continents2["Asia"] = "Asia";
120+
Continents2["Africa"] = "Africa";
121+
Continents2["Australia"] = "Australia";
122+
Continents2["Antarctica"] = "Antarctica";
123+
})(Continents2 || (Continents2 = {}));
124+
var continent = Continents2.Antarctica; // Antarctica
125+
var Direction1;
126+
(function (Direction1) {
127+
Direction1[Direction1["Up"] = 1] = "Up";
128+
Direction1[Direction1["Down"] = 2] = "Down";
129+
Direction1[Direction1["Left"] = 3] = "Left";
130+
Direction1[Direction1["Right"] = 4] = "Right";
131+
})(Direction1 || (Direction1 = {}));
132+
console.log(Direction1.Down); // 2
133+
var Direction2;
134+
(function (Direction2) {
135+
Direction2["Up"] = "Up";
136+
Direction2["Down"] = "Down";
137+
Direction2["Left"] = "Left";
138+
Direction2["Right"] = "Right";
139+
})(Direction2 || (Direction2 = {}));
140+
console.log(Direction2.Left); // Left
141+
// Any - !!!!!!!!!! Be careful with any !!!!!!!!!!
142+
var y = 'Hello';
143+
var whatever = 'aghhhhhh noooooo!';
144+
whatever = 5;
145+
whatever = true;
146+
whatever = {};
147+
whatever = [];
148+
whatever = null;
149+
whatever = undefined;
150+
whatever = Symbol('foo');
151+
whatever = function () { return 'Hello World'; };
152+
whatever = new Date();
153+
whatever = /foo/;
154+
whatever = new Error();
155+
whatever = [1, 'foo'];
156+
whatever = [1, 'foo', true];
157+
whatever = [1, 'foo', true, { name: 'John Doe' }];
158+
whatever = [1, 'foo', true, { name: 'John Doe' }, ['John Doe', 'Jane Doe']];
159+
whatever = [
160+
1,
161+
'foo',
162+
true,
163+
{ name: 'John Doe' },
164+
['John Doe', 'Jane Doe'],
165+
null,
166+
];
167+
whatever = [
168+
1,
169+
'foo',
170+
true,
171+
{ name: 'John Doe' },
172+
['John Doe', 'Jane Doe'],
173+
null,
174+
undefined,
175+
];
176+
whatever = [
177+
1,
178+
'foo',
179+
true,
180+
{ name: 'John Doe' },
181+
['John Doe', 'Jane Doe'],
182+
null,
183+
undefined,
184+
Symbol('foo'),
185+
];
186+
// Void - this is a function that doesn't return anything (the return type is inferred)
187+
function log(message) {
188+
console.log(message);
189+
}
190+
log('Hello World');
191+
log(5);
192+
var sing = function () {
193+
console.log('lalalala');
194+
};
195+
// Null and Undefined - these are not the same as void
196+
var meh = undefined;
197+
var noo = null;
198+
// Never - this is a function that never returns anything (the return type is inferred)
199+
var error = function () {
200+
throw Error('oops');
201+
};
202+
var username = {
203+
id: 1,
204+
name: 'Justin'
205+
};
206+
// Type Assertion - this is a way to tell the compiler that you know better than it does what the type of a variable is
207+
var cid = 1;
208+
// let customerId = <number>cid // this is the old way
209+
var customerId = cid; // this is the new way
210+
customerId = 5; // this will work because we told the compiler that cid is a number
211+
var ohhithere = 'OH HI THERE';
212+
var strLength = ohhithere.length;
213+
var strLength2 = ohhithere.length;
214+
// Functions - this is a function with a specific type for each parameter and the return type
215+
function addTwo(num) {
216+
return num + 2;
217+
}
218+
console.log(addTwo(2)); // 4
219+
function addNum(x, y) {
220+
return x + y;
221+
}
222+
console.log(addNum(1, 2)); // 3
223+
var user = {
224+
name: 'Justin',
225+
id: 0
226+
};
227+
var user1 = {
228+
id: 1,
229+
name: 'Justin'
230+
};
231+
var add = function (x, y) { return x + y; };
232+
var subtract = function (x, y) { return x - y; };
233+
// Union - this is a variable that can be multiple types but you can only assign one type
234+
var pid = 2;
235+
// const windowState: WindowStates = 'I dont know that this is not a window' // Error
236+
// const odd: OddNumberUnderTen = 11 // Error
237+
var odd = 1; // OK
238+
// Composing types -> Intersection Types - this is a variable that can be multiple types and you can assign any of those types
239+
var getLength = function (param) {
240+
// return param.length // Error
241+
};
242+
console.log(getLength('test')); // 4
243+
console.log(getLength(['test', 'test2'])); // 2
244+
var Person = /** @class */ (function () {
245+
// protected protectedAge: string // this is a way to make a property only accessible to the class and any classes that extend it
246+
function Person(id, name, age) {
247+
this.id = id;
248+
this.name = name;
249+
this.age = age;
250+
}
251+
Person.prototype.register = function () {
252+
return "".concat(this.name, " is now registered");
253+
};
254+
return Person;
255+
}());
256+
var justin = new Person(1, 'Justin', 35); // this is an instance of the class
257+
var john = new Person(2, 'John', 65); // this is an instance of the class
258+
var Employee = /** @class */ (function (_super) {
259+
__extends(Employee, _super);
260+
function Employee(id, name, age, position) {
261+
var _this = _super.call(this, id, name, age) || this;
262+
_this.position = position;
263+
return _this;
264+
}
265+
return Employee;
266+
}(Person)); // this is a class that extends the Person class
267+
var emp = new Employee(3, 'Jupiter', 25, 'CEO'); // this is an instance of the class
268+
// console.log(justin) // this will work because id and name are public
269+
// console.log(john) // this will work because id and name are public
270+
// console.log(justin.id) // this will work because id is public
271+
// console.log(justin.name) // this will work because name is public
272+
// console.log(justin.age) // this will not work because age is private
273+
console.log(justin.register()); // this will work because register is public
274+
// console.log(employee)
275+
console.log(emp.name); // this will work because name is public
276+
// Generics - this is a way to make a function reusable for multiple types of data (this is a function that takes a string and returns a string)
277+
function getArray(items) {
278+
return new Array().concat(items);
279+
} // this is a generic function
280+
var numArray = getArray([1, 2, 3, 4]); // this is a number array
281+
var strArray = getArray(['justin', 'john', 'jupiter']); // this is a string array
282+
numArray.push(5); // this will work because we told the compiler that the array is a number array
283+
// numArray.push('hello') // this will not work because we told the compiler that the array is a number array
284+
console.log(numArray); // this will work because we told the compiler that the array is a number array
285+
strArray.push('hello'); // this will work because we told the compiler that the array is a string array
286+
console.log(strArray); // this will work because we told the compiler that the array is a string array

index.ts renamed to src/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Implicit Types - TypeScript will infer the type of the variable
1+
// ! Implicit Types - TypeScript will infer the type of the variable
22

33
let helloWorld = 'Hello World' // string
44
let helloWorld2 = 123 // number
@@ -50,7 +50,7 @@ let helloWorld19 = [
5050
Symbol('foo'),
5151
] // (number | string | boolean | object | string[] | null | undefined | symbol)[]
5252

53-
// Explicit Types - TypeScript will not infer the type of the variable
53+
// ! Explicit Types - TypeScript will not infer the type of the variable
5454

5555
// Boolean - this is a boolean
5656
let isCool: boolean = true // this is the best practice

0 commit comments

Comments
 (0)