基础
环境
安装 typescript
sh
npm install typescript -g
npm install typescript -g
sh
pnpm add typescript -g
pnpm add typescript -g
sh
yarn global add typescript
yarn global add typescript
运行
先编译、再运行
tsc index.ts
、node index.js
或者使用 ts-node
直接运行
sh
npm install -g ts-node
npm install -g ts-node
类型注解和类型推断
类型注解
我们告诉 TS 变量是什么类型
ts
// 类型注解
const count: number = 1
const www: string = 'www'
// 类型注解
const count: number = 1
const www: string = 'www'
类型推断
TS 会自动的去尝试分析变量的类型
ts
// 类型推断
const count = 1
const www = 'www'
// 类型推断
const count = 1
const www = 'www'
如果 TS 能够自动分析变量类型,我们就什么也不需要做了
如果 TS 无法分析变量类型的话,我们就需要使用类型注解
静态类型
可以更好的判断变量的属性及内容
基础静态类型
number、string、null、undefined、symbol、boolean、void
ts
const count: number = 1
const www: string = 'www'
const count: number = 1
const www: string = 'www'
对象类型
ts
// 对象类型
const my: {
name: string
age: number
} = {
name: 'weiGuo',
age: 25
// sex: 'man',
}
// 对象类型
const my: {
name: string
age: number
} = {
name: 'weiGuo',
age: 25
// sex: 'man',
}
数组类型
ts
// 1、包含普通类型
const list: number[] = [1, 2, 3]
const list1: Array<number> = [1, 2, 3]
const list2: {
[index: number]: number
} = [1, 2, 3]
const multiArr: (number | string)[] = ['1', 1] // 多个类型
// 2、包含对象类型
// 2.1、类型别名(type alias)
type Info = {
name: string
age: number
}
const infoList: Info[] = [
{
name: 'forguo',
age: 25
}
]
// 2.2、类进行定义
class InfoClass {
name: string | undefined
age: number | undefined
}
const infoList2: InfoClass[] = [
{
name: 'forguo',
age: 25
}
]
// 1、包含普通类型
const list: number[] = [1, 2, 3]
const list1: Array<number> = [1, 2, 3]
const list2: {
[index: number]: number
} = [1, 2, 3]
const multiArr: (number | string)[] = ['1', 1] // 多个类型
// 2、包含对象类型
// 2.1、类型别名(type alias)
type Info = {
name: string
age: number
}
const infoList: Info[] = [
{
name: 'forguo',
age: 25
}
]
// 2.2、类进行定义
class InfoClass {
name: string | undefined
age: number | undefined
}
const infoList2: InfoClass[] = [
{
name: 'forguo',
age: 25
}
]
元组类型 tuple
数组中的每个元素类型的位置给固定住了,这就叫做元组
ts
const xiaojiejie1: [string, number] = ['teacher', 28]
// 二维数组
const xiaojiejies: [string, string, number][] = [
['dajiao', 'teacher', 28],
['liuying', 'teacher', 18],
['cuihua', 'teacher', 25]
]
const xiaojiejie1: [string, number] = ['teacher', 28]
// 二维数组
const xiaojiejies: [string, string, number][] = [
['dajiao', 'teacher', 28],
['liuying', 'teacher', 18],
['cuihua', 'teacher', 25]
]
类类型
code
ts
// 1、基本使用
class Person111 {
public name: string
constructor(name: string) {
this.name = name
}
}
const person111 = new Person111('www')
console.log(person111.name)
// 2、简写
class Person222 {
constructor(public name: string) {}
}
const person222 = new Person222('http')
console.log(person222.name)
// 3、类继承中的构造器写法
class PersonA {
constructor(public name: string) {
// 这里就不用再去 this.name = name;
}
}
class Teacher extends PersonA {
constructor(name: string, public age: number) {
super(name)
}
}
console.log(new Teacher('罗翔', 18))
// 4、typescript中类的Getter、Setter和static的使用
class XiaoJieJie {
public readonly _name: string
constructor(name: string, private _age: number) {
this._name = name
}
// ** get
get age() {
return this._age
}
// ** set
set age(age: number) {
this._age = age
}
say() {
return 'I am ' + this._age + 'years old' // XiaoJieJie.prototype.say = function
}
// ** 不用 new 出对象就可以使用类里的方法
static sayLove() {
return 'I Love you' // XiaoJieJie.sayLove = function
}
}
const www1 = new XiaoJieJie('www', 18)
www1.age = 20
// _name 不可以修改
www1._name = 'www';
console.log(www1.age)
// 直接访问
XiaoJieJie.sayLove();
// 5、抽象类的使用
abstract class Waiter {
abstract skill(): any // 没有具体方法,这里不写括号
}
class PrimaryWaiter extends Waiter {
skill() {
console.log('初级Waiter')
}
}
class IntermediateWaiter extends Waiter {
skill() {
console.log('中级Waiter')
}
}
class SeniorWaiter extends Waiter {
skill() {
console.log('终极Waiter')
}
}
// 1、基本使用
class Person111 {
public name: string
constructor(name: string) {
this.name = name
}
}
const person111 = new Person111('www')
console.log(person111.name)
// 2、简写
class Person222 {
constructor(public name: string) {}
}
const person222 = new Person222('http')
console.log(person222.name)
// 3、类继承中的构造器写法
class PersonA {
constructor(public name: string) {
// 这里就不用再去 this.name = name;
}
}
class Teacher extends PersonA {
constructor(name: string, public age: number) {
super(name)
}
}
console.log(new Teacher('罗翔', 18))
// 4、typescript中类的Getter、Setter和static的使用
class XiaoJieJie {
public readonly _name: string
constructor(name: string, private _age: number) {
this._name = name
}
// ** get
get age() {
return this._age
}
// ** set
set age(age: number) {
this._age = age
}
say() {
return 'I am ' + this._age + 'years old' // XiaoJieJie.prototype.say = function
}
// ** 不用 new 出对象就可以使用类里的方法
static sayLove() {
return 'I Love you' // XiaoJieJie.sayLove = function
}
}
const www1 = new XiaoJieJie('www', 18)
www1.age = 20
// _name 不可以修改
www1._name = 'www';
console.log(www1.age)
// 直接访问
XiaoJieJie.sayLove();
// 5、抽象类的使用
abstract class Waiter {
abstract skill(): any // 没有具体方法,这里不写括号
}
class PrimaryWaiter extends Waiter {
skill() {
console.log('初级Waiter')
}
}
class IntermediateWaiter extends Waiter {
skill() {
console.log('中级Waiter')
}
}
class SeniorWaiter extends Waiter {
skill() {
console.log('终极Waiter')
}
}
typescript中类的访问类型
public 默认 允许在类的内部和外部被调用
private 只允许在类的内部被调用,外部不允许调用
protected 允许在类内及继承的子类中使用
函数类型
ts
// 函数类型
const func: () => string = () => 'www'
const say: (string) => (string) = (name) => {
return name
}
// 函数类型
const func: () => string = () => 'www'
const say: (string) => (string) = (name) => {
return name
}
函数参数和返回类型定义
简单类型定义
ts
// 简单类型定义
function getTotal(one: number, two: number): number {
return one + two
}
getTotal(1, 2)
// 简单类型定义
function getTotal(one: number, two: number): number {
return one + two
}
getTotal(1, 2)
无返回值的定义: void
ts
// 无返回值的定义: void
function hello(): void {
console.log('hello')
}
hello()
// 无返回值的定义: void
function hello(): void {
console.log('hello')
}
hello()
never返回值类型
ts
// never返回值类型
// 抛出异常
function errFun(): never {
throw new Error()
console.log('error')
}
// 死循环
function whileFun(): never {
while (true) {}
console.log('error')
}
// never返回值类型
// 抛出异常
function errFun(): never {
throw new Error()
console.log('error')
}
// 死循环
function whileFun(): never {
while (true) {}
console.log('error')
}
函数参数为对象
解构赋值的类型注解
ts
// 函数参数为对象
function add({ one, two }: { one: number; two: number }): number {
return one + two
}
const total = add({ one: 1, two: 2 })
// 函数参数为对象
function add({ one, two }: { one: number; two: number }): number {
return one + two
}
const total = add({ one: 1, two: 2 })
注:
在 ts当中,如果对象参数为字面量,会强制校验多余参数,参数为变量则不会
接口
interface
基本使用、可选属性、任意属性、只读属性
ts
// 定义一个接口
interface IPeople {
name: string
age?: number // 可选属性
[propName: string]: any // 这个的意思是,属性的名字是字符串类型,属性的值可以是任何类型。
say?(): string
}
const weiGuo: IPeople = {
name: 'weiGuo',
// age: 25
// sex: 'man',
}
// 定义一个接口
interface IPeople {
name: string
age?: number // 可选属性
[propName: string]: any // 这个的意思是,属性的名字是字符串类型,属性的值可以是任何类型。
say?(): string
}
const weiGuo: IPeople = {
name: 'weiGuo',
// age: 25
// sex: 'man',
}
接口和类的约束
ts
// 应用这个接口
class People implements IPeople {
name = ''
sex = ''
say() {
return this.name
}
}
// 应用这个接口
class People implements IPeople {
name = ''
sex = ''
say() {
return this.name
}
}
接口间的继承
ts
/* 接口只是在 TypeScript 里帮我们作语法校验的工具,编译成正式的js代码,就不会有任何用处了。 */
interface ITeacher extends IPeople {
teach(): string
}
/* 接口只是在 TypeScript 里帮我们作语法校验的工具,编译成正式的js代码,就不会有任何用处了。 */
interface ITeacher extends IPeople {
teach(): string
}
类型别名和接口的区别
类型别名可以直接给类型,比如string,而接口必须代表对象。
interface可以继承类,type不能
ts
type Name = string
const people1: Name = 'name'
type Name = string
const people1: Name = 'name'
tsconfig.json
tsc init
初始化tsconfig文件