1. 安裝
- 下載vcode
按ctrl+k ctrl+l炕泳，然后搜索格式化文件吮成，設(shè)置格式化的快捷鍵 -
npm install typescript@2.9.2 -g
npm install ts-node@7.0.0 -g
記下ts-node可執(zhí)行文件路徑image.png - 配置文件(.vscode/launch.json)
{
"configurations": [
{
"name": "ts-node",
"type": "node",
"request": "launch",
"program": "這里寫(xiě)之前ts-node的安裝路徑",
"args": ["${relativeFile}"],
"cwd": "${workspaceRoot}",
"protocol": "inspector"
}
]
}
2. ts文檔
1. 第一步
創(chuàng)建greeter.ts文件早抠，按下保存的快捷鍵腌巾，再命令行進(jìn)入當(dāng)前文件夾運(yùn)行tsc greeter.ts杠袱，這樣就轉(zhuǎn)成js文件
function greeter(person: string) {
return "Hello, " + person;
}
let user = "Jane User";
console.log(greeter(user));
// 若傳的不是string會(huì)報(bào)錯(cuò)，但undefined可以通過(guò)
2. 接口
interface可以讓你規(guī)定一個(gè)對(duì)象必須要有哪些屬性智绸，同時(shí)在函數(shù)傳的參數(shù)里也只能用這些屬性
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: "Jane", lastName: "User" };
console.log(greeter(user));
3. 類
類可以支持函數(shù)
class Student {
fullName: string;
firstName: string;
constructor(firstName: string, public middleInitial: string, public lastName: string) {
this.firstName = firstName
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person : Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
console.log(greeter(user));
public等于幫你申明一個(gè)變量并在constructor里寫(xiě)上this.lastName = lastName野揪，所以Student有四個(gè)屬性：fullName、firstName瞧栗、middleInitial囱挑、lastName，但在函數(shù)greeter里只能用接口里有的屬性沼溜，不能用fullName，除非你接口用Student
3. 實(shí)現(xiàn)一些簡(jiǎn)單函數(shù)
1. 找較小數(shù)
function min(a: number,b: number): number{
if(a>b){
return b
}else{
return a
}
}
console.log(min(2,1))
意思是返回值也必須是number
2. 重載
function add(a: string, b: string): string;
function add(a: number, b: number): number;
function add(a: any, b: any): any {
return a+b
}
console.log(add('a','d'));
a和b只支持同時(shí)是string或者同時(shí)是number類型
3. 定義數(shù)組的方式
- 第一種
let a: number[] = [1,2,3]; // 意思是由number組成的數(shù)組
- 第二種
let b: Array<number> = [1,2,3]
3. 元祖
已知元素?cái)?shù)量和類型情況下的數(shù)組可以用元祖
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error
3. 判斷是否能結(jié)婚
interface human{
gender: string;
}
function merry(a: human,b :human): [human, human]{
if(a.gender !== b.gender){
return [a,b]
} else{
throw new Error('性別相同不能結(jié)婚')
}
}
let a = {gender: 'male'}
let b = {gender: 'female'}
console.log(merry(b,b));
- 枚舉
給性別規(guī)定只能是male和female
enum Gender {
Male,
Female
}
interface human{
gender: Gender;
}
function merry(a: human,b :human): [human, human]{
if(a.gender !== b.gender){
return [a,b]
} else{
throw new Error('性別相同不能結(jié)婚')
}
}
let a = {gender: Gender.Male}
let b = {gender: Gender.Female}
console.log(merry(a,b));
4. 實(shí)現(xiàn)一些命令行工具
1. process.argv
在1.ts文件里寫(xiě)
#!/usr/bin/env ts-node // 蛇棒
console.log(process.argv)
// 在命令行里運(yùn)行`./1.ts abc`游添，process.argv 就是這一行的內(nèi)容
console.log(123);
第一行加了蛇棒系草，在命令行運(yùn)行node ./1.ts的時(shí)候就不用加node，直接運(yùn)行./1.ts即可
運(yùn)行npm init -y唆涝，在目錄里添加package.json文件
運(yùn)行npm i -D @types/node找都，安裝process的包
2. 加法
給ts加es6的語(yǔ)法庫(kù)，在目錄下創(chuàng)建tsconfig.json文件廊酣，去網(wǎng)上復(fù)制tsconfig.json的默認(rèn)格式能耻，然后在里面添加"es2015"
// tsconfig.json
{
"compilerOptions": {
"lib": [
"es2015"
]
}
}
- add.ts
#!/usr/bin/env ts-node
let a: number = parseInt(process.argv[2])
let b: number = parseInt(process.argv[3])
if(Number.isNaN(a) || Number.isNaN(b)){
console.log('必須是數(shù)字')
} else {
console.log(a+b)
}
命令行運(yùn)行./add.ts 1 2
#!/usr/bin/env ts-node
{
let a: number = parseInt(process.argv[2])
let b: number = parseInt(process.argv[3])
if(Number.isNaN(a) || Number.isNaN(b)){
console.log('必須是數(shù)字')
process.exit(1)
}
console.log(a+b)
process.exit(0)
}
成功的退出返回0，不成功的返回1
3. 族譜
#!/usr/bin/env ts-node
{
class Person{
public Children: Person[] = [];
constructor(public name: string){}
addChild(child: Person): void {
this.Children.push(child)
}
introduceFamily(n: number): void {
let pre = '----'.repeat(n-1)
console.log(pre + this.name)
this.Children.forEach(child=>{
child.introduceFamily(n+1)
})
}
}
let a = new Person('jpj')
let b = new Person('son')
let c = new Person('daughter')
a.addChild(b)
a.addChild(c)
a.introduceFamily(1)
}
下面將n改為可選參數(shù)
#!/usr/bin/env ts-node
{
function createPre(n: number): string {
return '----'.repeat(n)
}
class Person{
public Children: Person[] = [];
constructor(public name: string){}
addChild(child: Person): void {
this.Children.push(child)
}
introduceFamily(n?: number): void {
n = n || 1
console.log(createPre(n-1) + this.name)
this.Children.forEach(child=>{
child.introduceFamily(n+1)
})
}
}
let a = new Person('jpj')
let b = new Person('son')
let c = new Person('daughter')
a.addChild(b)
a.addChild(c)
a.introduceFamily(1)
}
在n后加個(gè)?亡驰，就變?yōu)榭蛇x參數(shù)
5. 模版字符串
let name: string = `Gene`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ name }.
6. 枚舉
enum Color {Red, Green, Blue}
let c: Color = Color.Green;
enum Color {Red = 0, Green, Blue}
let colorName: string = Color[2];
console.log(colorName); // 顯示'Blue'
7. any
// 前面不加any晓猛，這樣用編譯時(shí)就會(huì)報(bào)錯(cuò)
let notSure = 412312;
console.log(notSure.substr())
// 加個(gè)any就會(huì)在執(zhí)行時(shí)報(bào)錯(cuò)
let notSure: any = 412312;
console.log(notSure.substr())
// 在不知道數(shù)組類型時(shí)也可以用any
let list: any[] = [1, true, "free"];
list[1] = 100;
8. void
// void表示沒(méi)有任何類型。 當(dāng)一個(gè)函數(shù)沒(méi)有返回值時(shí)凡辱，你通常會(huì)見(jiàn)到其返回值類型是 `void`：
function warnUser(): void {
alert("This is my warning message");
}
// 聲明一個(gè)void類型的變量沒(méi)有什么大用戒职，因?yàn)槟阒荒転樗x予undefined和null：
let unusable: void = undefined;
9. 可選屬性
加了?疑問(wèn)號(hào)之后，就變?yōu)榭蛇x屬性透乾，如果不加疑問(wèn)號(hào)的話在寫(xiě)createSquare的參數(shù)的時(shí)候就必須同時(shí)傳color和width
interface SquareConfig {
color?: string;
width?: number;
}
function createSquare(config: SquareConfig): {color: string; area: number} {
let newSquare = {color: "white", area: 100};
if (config.color) {
newSquare.color = config.color;
}
if (config.width) {
newSquare.area = config.width * config.width;
}
return newSquare;
}
let mySquare = createSquare({color: "black"});
10. 接口
1. 只讀屬性
interface Point {
readonly x: number;
readonly y: number;
}
let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!
// 賦值
- 還有只讀的數(shù)組
let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
ro[0] = 12; // error!
ro.push(5); // error!
ro.length = 100; // error!
a = ro; // error!
賦新值也不行洪燥，除非用類型斷言重寫(xiě)
a = ro as number[];
做為變量使用的話用 const磕秤，若做為屬性則使用readonly。
2. 額外的屬性檢查
如果你能夠確定這個(gè)對(duì)象可能具有某些做為特殊用途使用的額外屬性
interface SquareConfig {
color?: string;
width?: number;
[propName: string]: any;
}
3. 接口也可以定義函數(shù)
interface SearchFunc {
(source: string, subString: string): boolean;
}
// 函數(shù)的參數(shù)名不需要與接口里定義的名字相匹配
let mySearch: SearchFunc = function(src: string, sub: string): boolean {
let result = src.search(sub);
return result > -1;
}
11. 函數(shù)
let myAdd: (baseValue: number, increment: number) => number =
function(x: number, y: number): number { return x + y;
};
函數(shù)也不會(huì)固定參數(shù)的名字捧韵，只要類型匹配就可以
- 剩余參數(shù)
在你不確定參數(shù)個(gè)數(shù)時(shí)
function buildName(firstName: string, ...restOfName: string[]) {
return firstName + " " + restOfName.join(" ");
}
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
console.log(employeeName);
12. 泛型
一個(gè)函數(shù)想讓傳入?yún)?shù)類型和return類型相同時(shí)市咆，可以用泛型
function identity<T>(arg: T): T {
console.log(T.length) // 報(bào)錯(cuò)
return arg;
}
這樣你傳的是什么類型，輸出就必須是什么類型
function loggingIdentity<T>(arg: T[]): T[] {
console.log(arg.length); // 這樣就不會(huì)報(bào)錯(cuò)
return arg;
}
13. 聲明合并
1. 合并接口
interface Box {
height: number;
width: number;
}
interface Box {
scale: number;
}
let box: Box = {height: 5, width: 6, scale: 10};
13. 類型兼容性
1. 函數(shù)
let x = (a: number) => 0;
let y = (b: number, s: string) => 0;
y = x; // OK再来，可以把x賦給y
x = y; // Error蒙兰，不能把y賦給x
console.log(x(123123))
