TypeScript入门

最新推荐文章于 2023-11-01 12:16:25 发布

_Nana_

最新推荐文章于 2023-11-01 12:16:25 发布

阅读量322

点赞数

分类专栏： TypeScript 文章标签： TypeScript

本文链接：https://blog.csdn.net/Nana_9457/article/details/89151593

版权

TypeScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

0. 安装

node install -g typescript --save

1. 使用

新建文件：main.ts，键入

let message = 'Hello World!';
console.log(message);

命令行输入：tsc main.ts，得到一个js文件

var message = 'Holle World!';
console.log(message);

注意let变成var，证明转换生效了

可以设置监听，则不用每次都执行tsc，命令行输入：tsc main --watch

2. 变量类型

1）变量类型包括：boolean、string、number，写法为

let name: string = '';
let total: number = 0;
let really: boolean = true;

好处有两点：
1、声明为固定类型的变量，当试图声明为其他类型时，会报错；
2、intellisense：当输入name.时，后边会出现number的可调用方法提示，便于开发。

2）null / undefined

let n:null = null;
let u: undefined = undefined;

null和undefined可以作为上面变量的subtype，例如

let name: string = undefined;
let isNew: boolean = null;

3）array

// 单一数据类型
let list0: number[] = [1,2,3];
let list1: Array<number> = [1,2,3];
// 多数据类型(限制?个数和类型是固定的，下一行只能是一个string和一个number)
let persion: [string, number] = ['Nana', 23];

4）enum

enum Color {Red, Green, Blue};
let c: Color = Color.Green;
console.log(c); // 1

enum Color {Red = 5, Green, Blue};
let c: Color = Color.Green;
console.log(c); // 6

5）any 任意types

let randomValue: any = 10;
randomValue = true;
randomValue = 'Nana';

⚠️没有intellisense

6）多种类型

let multitype: number | boolean;
multitype = 3;
nultitype = false;

3. 函数

1）参数/返回值类型

function add(num1: number, num2: number){
	return num1 + num2;
}

function add(num1: number, num2: number) : number{
	return num1 + num2;
}

2）可选参数

function add(num1: number, num2?: number): number{}

在可选参数的参数名后面加一个**？**。
⚠️1、没有传入num2时，num2会被当作undefined；
2、可选参数需要放在必须参数的后面。

3）默认参数值

function add(num1: number, num2: number = 20): number{}

去掉？，加上 = xxx

4. 接口

function fullName(person: {firstName: string, lastName: string}): string{}

改进成

interface Person{
	firstName: string,
	lastName?: string
}
function fullName(persion: Person): string{}

5. 类

class Employee{
	employeeName: string;
	constructor(name: string){
		this.employeeName = name;
	}
	greet(){
		console.log(`Good Morning ${this.employeeName}!`);
	}
}
let empl1 = new Employee('Nana');
empl1.greet();

继承

class Manager extends Employee {
	constructor(managerName: string){
		super(managerName);
	}
	delegateWork() {
		console.log('Manager delegating tasks');
	}
}

let m1 = new Manager('candy');
m1.delegateWork(); // Manager delegating tasks
m1.greet(); // Good Morning Candy
console.log(m1.employeeName); // Candy