TypeScript 是什么，以及它的一些基础语法

目录

 一. TypeScript 是什么？

二. 为什么要使用TS（即，为什么要给JS代码加类型）：

三. JS与TS的关系：

 四. 基础语法

1. TS 的基本类型：

2. 原语：

3. 数组：

4. 对象：

5. 函数：

6.空值void

7.联合类型： 

8. 类型断言：

9. 元组 Tuple:

10. 枚举 enum：

11.any:

12.字面量类型+联合类型

---

 一. TypeScript 是什么？

TypeScript 是 JavaScript 的运行时，带有编译时类型检查器。

 注： 1）TypeScript 代码会被编译成JavaScript代码，JS代码才是实际被执行的代码。

          2）JS是弱类型的，而TS提供了强类型以及更多的面向对象的内容。

二. 为什么要使用TS（即，为什么要给JS代码加类型）：

最重要的一点是，利于代码的重构，利于编译器在编译时捕获异常，而非在运行时才捕获。

三. JS与TS的关系：

TS只是带有文档的JS，提供一种新的语法，减少bug产生。

 四. 基础语法

1. TS 的基本类型：

字符串（string）、数字（number）、布尔值（boolean）、空（null）、未定义（undefined）、数组（array）、对象（object）、元组（tuple）、枚举（enum）、any、void、never等12种。

2. 原语：

string   字符串值，也可模板字符串

let name: string = "Tom";           let hello = `hello my name is ${name}`;

number  没有int、float， 一切都是number ，包括 XX进制    

let age: number = 6;                   let price: number = 0xf00d；

boolean  true和flase 

let gender: boolean = false;

3. 数组：

[1,2,3 ] => number [ ] ; 也可 Array< number > （泛型）

[ 'li','2','3' ] => string [ ] ;  Array <string>

export  interface  valueGroup {
    name:string;
    age:number,
    sex:boolean
}


export const  fun1 =(value: valueGroup[])=>{
    // value:valueGroup[] 意思是说，value是个数组，他的每一项都是下面这种对象,即[{},{},{}]
     .........
}

4. 对象：

属性：

let person3: {

        name: string;

        sayHello: Function;   // 或者 sayHello(): void

} = {

        name: '王五',

        sayHello() {},

};

类型别名：

type Point = {
    x: number;
    y: number;
};

function printCoord ( pt: Point ) {
}

接口声明：

interface Point {
   x: number;
   y: number;
}

function printCoord ( pt: Point ) {

}

注：类型别名与接口之间的差异

类型别名和接口非常相似，在很多情况下你可以自由选择它们。几乎所有的功能都在interface中可用type，关键区别在于 类型创建后不可更改，接口创建后可以添减新字段

5. 函数：

// 单独指定参数，返回值类型

function  greet (name: string)：string {     

        return name；

}

可选属性： 检查这个属性是否存在，当为undefined时不给此值赋值,用？。

function printName(obj: { first: string; last?: string}) {

}

// 同时指定参数，返回值类型
type addFunc = (num1: number, num2: number) => number; 

const adds: addFunc = (num1, num2) => {
  return num1 + num2;
};

 js写法 : 

fun foo(){
    //if ......
    retrun { a:1, b:2 };
    //else.........
    return { a:1, b:undefined }
}

ts写法 : 

fun foo() : {a:number, b?：number} {
    //if ......
    retrun { a:1, b:2 };
    //else.........
    return { a:1 }
}

6.空值void

某种程度上, void类型像是与any类型相反,它表示没有任何类型. 当一个函数没有返回值时,你通常见到的就是void;

function add1(): void {
 //等同下面2种写法
}

const add2 = () => {};
// 如果什么都不写 表示add2函数的类型为void
 
const add3 = (): void => {};
// 这种写法明确指定返回值为void与上方的类型相同
 


//void和undefine的不一样
const add4 = (): undefined => {
  return undefined;
};
// 如果指定返回值为undefined  return undefined

声明一个void类型的变量没什么大用,因为你只能给它赋值undefined和null 

let unsable: void = undefined

一个例子：

7.联合类型： 

表示可能是这些类类型中的任何一种值

function printId ( id: number | string ){

}

function welcomePeople(x: string[] | string) {

}

8. 类型断言：

若很清楚 一个变量 比 它现有类型更确切的类型，那么就可以使用类型断言。

 类型断言两种形式：

     1) 尖括号写法：

          let someValue : any = " a string";

          let strLength : number = ( <string> someValue ).length;

      2) As写法：

          let someValue : any = " a string";

          let strLength : number = ( someValue as string ).length;

      注：当在TypeScript里使用JSX时，只能使用as语法断言。

9. 元组 Tuple:

元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同.比如:你可以定义一对值为string和number类型的元组

let arr: [string, number] = ['li', 5];

10. 枚举 enum：

enum Week{Mon,Tue,Wed}
let day:Week = Week.Tue
console.log(day) // 1
console.log(Week[0]) // Mon
console.log(Week["Mon"]) // 0

//数字枚举

// Down -> 11、Left -> 12、Right -> 13
enum Direction {
  Up = 10,
  Down,
  Left,
  Right,
} 

enum Direction {
  Up = 2,
  Down = 4,
  Left = 8,
  Right = 16,
}

//字符串枚举
enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT',
}

11.any:

当不希望某个特定值导致类型检查错误时使用， 可以访问他的任何值

let anyValue:any = 4;

anyValue = 'hello';

12.字面量类型+联合类型

// 字面量类型
 
let str1 = '张三';
const str2 = '张三';

type Direction = 'left' | 'right' | 'up' | 'down';

// 使用自定义类型:
 
function changeDirection(direction: Direction) {
//参数 direction 的值只能是 up/down/left/right 中的任意一个
 
  console.log(direction);
}
 
// 调用函数时，会有类型提示：
changeDirection('up');