TypeScript学习手记目录
- 1.TypeScript官网、安装与运行
- 2.TypeScript基础类型与对象类型
- 3.数组、元组及类型别名
- 4.Interface接口
- 5.类的定义与继承
- 6.静态属性,Setter和Getter
- 7.抽象类
- 8.联合类型和类型保护(类型断言)
- 9.Enum枚举类型
- 10.泛型
- 11.命名空间-namespace
- 12.全局类型与函数重载以及模块化
- 13.类的装饰器
- 14.方法装饰器
- 15.访问器的装饰器
- 16.属性的装饰器
- 17.参数装饰器
1.TypeScript官网、安装与运行
名称 |
值 |
备注 |
官方地址 |
https://www.typescriptlang.org |
|
安装typescript |
npm install typescript |
-g 为全局安装 |
初始化typescript |
tsc --init |
初始化 |
初始化typescript |
tsc 文件名(包含扩展名) |
初始化 |
运行编译器 |
npx tsc |
生成js文件 |
安装ts-node |
npm install ts-node |
|
运行typescript |
ts-node 文件名(包含扩展名) |
输出ts文件结果 |
安装superagent |
npm install superagent --save |
爬取数据使用 |
安装superagent翻译文件 |
npm install @types/superagent -D |
superagent.t.ts翻译文件 |
安装cheerio |
npm install cheerio --save |
cheerio库 获取页面区块的内容 |
安装cheerio翻译文件 |
npm install @types/cheerio -D |
cheerio 库 获取页面区块的内容 |
安装nodemon |
npm install nodemon -D |
安装nodemon,自动监听源文件并编译js文件 |
安装concurrently |
npm install concurrently -D |
安装concurrently ,并行执行 |
安装npm包 |
npm init -y |
|
安装express |
npm install express --save |
|
2.TypeScript基础类型与对象类型
名称 |
值 |
示例 |
基础类型 |
null, undefined, symbol, boolean, void, number, string, never |
const count: number = 123 |
对象类型 |
{} |
const count: {name: string} = {name: ‘hyb’} |
数组类型 |
[] |
const count: number[] = [1, 2, 3] |
类类型 |
Class |
const count: 类 = new 类() |
函数类型 |
function |
const count: () => number = () => {return 123} |
declare关键字 |
定义全局变量 declare |
declare var $: (param: () => void) => void |
declare关键字 |
定义全局函数 declare |
declare function $(param: () => void) => void |
declare关键字 |
定义全局函数 declare .d.ts中,函数可以重载 |
declare function $(param: string): {html: (html: string) => {}} |
function add(first: number, second: number): never{
let j=0
for(let i=1;i>j;i++){
}
return first + second;
}
function add(first: number, second: number): number {
return first + second;
}
function add(
{first, second}:{first: number, second: number}
): number {
return first + second;
}
const func = (str: string) => { return parseInt(str, 10) }
const func1: (str: string) => number = (str) => { return parseInt(str, 10) }
const date = new Date()
const date: Date = new Date()
let temp: number | string = 123
temp = '456'
interface Person { name: 'string'}
const rawData = '{"name": "hyb"}'
const newData = Person = JSON.parse(rawData)
3.数组、元组及类型别名
const arr: (number | string)[] = [1, 2, 3]
const teacher: [string, number] = ['hyb', 18]
type User = {name: string, age: number}
class User {
name: string;
age: number;
}
const objectArr: User[] = [{
name: 'hyb',
age: 28
}]
4.Interface接口
interface Person {
readonly name: string;
age?: number;
[propName: string]: any;
say(): string;
}
interface Teacher extends Person {
teach(): string
}
interface SayHi {
(teach: string): string
}
class User implements Person {
}
5.类的定义与继承
class Person {
name = 'hyb'
getName() {
return this.name
}
}
class Teacher extends Person {
getTeacherName() {
return this.name
}
getName() {
return super.getName() + 'bin'
}
}
class Person {
public name = 'hyb'
private age = 18
protected getName() {
return this.name
}
}
class Person {
public name: string
constructor(name: string){
this.name = name
}
constructor(public name: string){}
}
class Teacher extends Person{
constructor(public age: number){
super('hyb')
}
}
6.静态属性,Setter和Getter
class Person{
constructor(private _name: string){}
get name() { return this._name }
set name(name: string) { this._name = name }
}
class Demo {
private static instance: Demo
private constructor(public name: string) {}
static getInstance() {
if(!this.instance){
this.instance = new Demo('hyb')
}
return this.instance
}
}
const demo1 = Demo.getInstance()
7.抽象类
class Person {
public readonly name: string;
constructor(name: string) {
this.name = name;
}
}
const person = new Person('hyb');
abstract class Geom {
width: number;
getType() {
return 'Gemo';
}
abstract getArea(): number;
}
class Circle extends Geom {
getArea() {
retuen 123;
}
}
8.联合类型和类型保护(类型断言)
interface Bird {
fly: boolean
sing: () => {}
}
interface Dog {
fly: boolean
bark: () => {}
}
function trainAnial(animal:Bird | Dog) {
if(animal.fly){
(animal as Bird).sing()
} else {
(animal as Dog).bark()
}
}
function trainAnial(animal:Bird | Dog) {
if('sing' in animal){
animal.sing()
} else {
animal.bark()
}
}
function add(first: string | number, second: string | number) {
if(typeof first === 'string' || typeof srecond === 'string') {
return `${first}${second}`
}
return first + second
}
class NumberObj {
count: number;
}
function add(first: object | NumberObj , second: object | NumberObj ) {
if(first instanceof NumberObj && srecond instanceof NumberObj) {
return first.count + srecond.count
}
return 0
}
9.Enum枚举类型
enum Status {
OFFLINE,
ONLINE = 4,
DELETED
}
enum Status {
OFFLINE,
ONLINE,
DELETED
}
enum Status {
OFFLINE = 1,
ONLINE,
DELETED
}
Status.OFFLINE ===> 0
Status[0] ===> OFFLINE
10.泛型
function jojn<T, P>(first: T, second: P){
return `${first}${second}`
}
jojn<string, string>('1', '1')
function map<T>(params: T[]){
return params
}
function map<T>(params: Array<T>){
return params
}
map<string>(['123'])
interface Item {
name: string;
}
class DataManager<T extends Item> {
constructor(private data: T[]) {}
getItem(index: number): string {
return this.data[index].name
}
}
const data = new DataManager([{
name: 'hyb'
}])
function hrllo<T>(params: T) {
return params;
}
const func: <T>(param: T) => T = hello
interface Person {
name: string
age: number
gender: string
}
class Teacher {
constructor(private info: Person) {}
getInfo<T extends keyof Person>(key: T): Person[T] {
return this.info[key]
}
}
const teacher = new Teacher({
name: 'hyb',
age: 18,
gender: 'male'
})
teacher.getInfo('name')
11.命名空间-namespace
namespace Home {
class Header {...}
class Footer {...}
export class Page {...}
}
new Home.Page()
namespace Home {
export namespace SubHome {
export interface User {
name: string
}
}
}
12.全局类型与函数重载以及模块化
declare var $: (param: () => void) => void
interface JqueryInstance {
html: (html: string) => JqueryInstance
}
declare function $(readyFunc: ()=> void): void
declare function $(selector: string): JqueryInstance
declare namespace $ {
namespace fn {
class init {}
}
}
interface JQuery {
(readyFunc: () => void): void;
(selector: string): JqueryInstance
}
declare var $: JQuery;
declare module 'jquery' {
interface JqueryInstance {
html: (html: string) => JqueryInstance
}
function $(readyFunc: ()=> void): void
function $(selector: string): JqueryInstance
namespace $ {
namespace fn {
class init {}
}
}
export = $
}
import $ from 'jquery'
$(function(){
......
})
13.类的装饰器
function testDecorator() {
return function<T extends new (...args: any[]) => any>(constructor: T) {
name = 'bin'
getName() {
return this.name
}
}
}
const Test = testDecorator()(
class {
name: string
constructor(name: string) {
this.name = name
}
}
)
const test = new Test('hyb')
console.log(test.getName())
14.方法装饰器
function getNameDecorator(target: any, key: string, descriptor: PropertyDescriptor) {
console.log(target, key)
descriptor.writable = false
descriptor.value = function(){
return 'decorator'
}
}
class Test {
name: string
constructor(name: string) {
this.name = name
}
@getNameDecorator
getName() {
return '123'
}
}
15.访问器的装饰器
function visitDecorator(target: any, key: string, descriptor: PropertyDescriptor) {
descriptor.writable = false
}
class Test {
private _name: string
constructor(name: string) {
this._name = name
}
get name() {
return this.name
}
@visitDecorator
set name(name: string) {
this._name = name
}
const = test = new Test('hyb')
test.name = 'hybin'
console.log(test.name)
16.属性的装饰器
function nameDecorator(target: any, key: string):any {
const descriptor: PropertyDescriptor = {
writable = false
}
return descriptor;
}
const = test = new Test('hyb')
test.name = 'hybin'
function nameDecorator(target: any, key: string):any {
target[key] = 'lee'
}
class Test {
@nameDecorator
name = 'hyb'
}
const test = new Test()
console.log((test as any).__proto__.name)
17.参数装饰器
function paramDecorator (target: any, key: string, paramIndex: number):any {
console.log(target, key, paramIndex)
}
class Test {
getInfo(@paramDecorator name: string, age: number) {
console.log(name, age)
}
}
const test = new Test()
test.getInfo('hyb', 30)