TypeScript(一)

TypeScript基础

1.npm 安装

npm i typescript -g

2.自动编译

tsc watch

3.报错时不进行编译

tsc --noEmitOnError --watch

4.显示类型

function greet(person:string,date:Date){
    console.log(`你好${person},今天几号 ${date}`)
};
greet('小明12',new Date());

5.降级编译

首先 执行命令 

tsc --init

然后再 tsconfig.json 文件中找到     "target": "es016", 修改为    "target": "es5",  

注：编译输出文件地址"outDir": "./dist",

编译前/后

//编译前
function greet(person:string,date:Date){
    console.log(`Hello${person},今天几号 ${date}`)
};
greet('小明12',new Date());

//编译后
function greet(person, date) {
    console.log("Hello".concat(person, ",\u4ECA\u5929\u51E0\u53F7 ").concat(date));
}
;
greet('小明12', new Date());

6.对象类型

//编译前
function a(pt:{name:string,age:number}){
    console.log('名字'+pt.name);
    console.log('年龄'+pt.age);
}

a({
    name:'张三',
    age:18
})

//编译后
"use strict";
function a(pt) {
    console.log('名字' + pt.name); //名字张三
    console.log('年龄' + pt.age);//年龄18
}
a({
    name: '张三',
    age: 18
});

7.联合类型

function prinId(id:number | string){

    if(typeof id == 'string'){ //需做判断
        console.log(id.toUpperCase())
    }
}

function welocomPeople(x:string[] | string){
    if(Array.isArray(x)){
        console.log(x.join())   
    }
}

8.类型别名

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

type Id = Number | string;

function printCord(pt:Point,id:Id) {
    
}
printCord({
    x:100,
    y:100
},5)

type UserInputinitzedString = string
function spaninitedInput(str:string):UserInputinitzedString{ //返回值为string
    return str.slice(0,2);
}

9.接口

// 接口
interface Point{
    x:number,
    y:number
}

function printCord(pt:Point){

}
printCord({
    x:100,
    y:100
})

// 扩展接口
interface Animal{
    name:string
}

interface Bear extends Animal{
    honey:boolean
}

const bear:Bear ={
    name:'winie',
    honey:true
}

console.log(bear.name)
console.log(bear.honey)
/**
 * 接口注释：
 * 扩展的是实例类型
*/

// 交叉扩展
type AnimalS = {
    name:String
}
type BearS = AnimalS & {
    honey:boolean
}

const bearS: BearS={
    name:'winnie',
    honey:true
}

// 向现有接口/类型新增 新字段

interface MyWindow {
    conut:number
}

// interface MyWindow = {
//     title:string
// }
interface MyWindow {
    title:string
}

const w:MyWindow = {
    title:'Helle ts',
    conut:18
}
/**
 *  创建了之后就不可以修改
 * */ 

10.断言

const MyCanvas = document.getElementById('main_canvas') as HTMLCanvasElement

const MyCanvas2 = <HTMLCanvasElement>document.getElementById('main_canvas');

const x = ('hello' as unknown) as number;

11.文字类型

let testString = 'Hello World';
testString = '您好呀';

// 传入
function printText(s:string,alignment:'left'|'right'|9){

}
printText('hello','left');
printText('hello',9);

// printText('你好','center'); //报错

//返回
function compare(a:string,b:string):-1|0|1{
    return a==b?0:a>b?1:-1
}

//实例
function handleRequest(url:string,method:'GET' | 'POST' | 'GUESS'){
    
}

const req ={
    url:'https://blogs.kongjz.com',
    method:'GET',,
    method2:'GET' as 'GET' //这里 断言 method2的值为GET类型,而不是String
}
// } as const
handleRequest(req.url,req.method); //报错 这里传入值GET被当作了字符串
handleRequest(req.url,req.method as 'GET');
handleRequest(req.url,req.method2);

12.枚举

//编译前
enum Direction {
    Up = 1,
    Down,
    Left,
    Right
}

//编译后
"use strict";
var Direction;
(function (Direction) {
    Direction[Direction["Up"] = 1] = "Up";
    Direction[Direction["Down"] = 2] = "Down";
    Direction[Direction["Left"] = 3] = "Left";
    Direction[Direction["Right"] = 4] = "Right";
})(Direction || (Direction = {}));

13.剩余参数

必要参数，默认参数和可选参数有个共同点：它们表示某一个参数。 有时，你想同时操作多个参数，或者你并不知道会有多少参数传递进来。 在JavaScript里，你可以使用arguments来访问所有传入的参数。

function buildName(firstName: string, ...restOfName: string[]) {
  return firstName + " " + restOfName.join(" ");
}
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
let buildNameFun: (fname: string, ...rest: string[]) => string = buildName;