|
1、全局安装
npm install -g typescript
2、将ts编译成js
注：可能这里会报错 参考下图
ts包容性不错 如果str没加string编译报错，但是可以正确转换成js
function abc(person:string){
return 'hello '+person
}
let str:string = '123'
console.log(abc(str))
转换以后
function abc(person) {
return 'hello ' + person;
}
var str = '123';
console.log(abc(str));
3、安装angular-cli
npm install -g @angular/cli
4、创建项目
router 安装和是否用less自己选择
5、运行项目
6、项目中平时改动的地方是src里面的app，其他的很少动，package.json是项目的依赖
app.module.ts是根模块 用到的组件都要导入进来且声明
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; //导入
@NgModule({//装饰器 装饰的 class AppModule
declarations: [
AppComponent //声明
],
imports: [//导入的核心模块
BrowserModule,//编译的
AppRoutingModule
],
providers: [],//自定义的服务，模块
bootstrap: [AppComponent]//挂在的根组件，就是首页是哪个放那个
})
export class AppModule { }
7、typescript 数据类型
原始数据类型： 数值 布尔 字符串 null undefind
布尔类型定义
let isData:boolean = true
isData = false
let isData:boolean = Boolean(2) 直接调用Boolean是可以的
错误写法:因为new Boolean返回的是一个对象类型
let isData:boolean = new Boolean(2)
数值类型定义
let num:number = 1
let num16:number = 0xf00a
let nonNum:number = NaN
let infiNum:number = Infinity
字符串类型定义
let lname:string = 'joy';
let age:number = 30;
let box:string = `我的年龄是${age}`;
// 空值void 大多数定义函数没有返回值 ，一般不用于定义变量，因为一旦变量定义为void，赋值只能是undefined或者null
function hello():void{
console.log('holle')
}
null和undefined定义 没什么意义，他们是所有类型的子类型
例如
let lname:string = 'joy';
lname=undefined
lname=null
//没啥意义
let a:undefined = undefined
a=null
let b:null = null
b=undefined
void类型是不能赋值给其他类型的，虽然他也只有undefined和null
let lname:string = 'joy';
lname=undefined
let abc:undefined = undefined
let dfe:void = undefined
lname = abc
lname = dfe //这样不允许 因为dfe是void类型
任意值类型 ：any用来表示任意值类型赋值
let jsf:any = 'abf'
console.log(jsf.myname) //undefined 任意值类型允许访问他任意的属性
jsf = 123
// 未声明类型的变量
let wfkk1;//wfkk1在声明的时候未定义类型，就被定义成任意类型
let wfkk1 = 'sho';
let wfkk1 = 123;
let somethis = '132'//somethis虽然没有定义类型，但赋值未字符串。ts有类型推断规则，会将赋值定义成变量的类型
somethis = 123 // 报错
联合类型
表示取值可以取多个
// 联合类型
let cat:string|number;
cat = 123
cat = '猫'
let cat1:string|number = '猫咪';
ts接口 定义接口关键词 interface
接口：行为的抽象。具体的行动由类实现（接口抽象出来的内容） 相当于定义的描述
interface Peason{
name:String;
age:Number;
}
// 一般接口首字母都会大写 用接口定义的对象属性不能多写不能少写
let lay:Peason = {
name:'tom',//约束tom必须和接口一样的属性
age:30
}
let lay1:object = {
name:'join',
age:12
}
// 接口属性可写可不写
interface Student{
name:String;
age?:Number; //?说明类型可写可不写
}
let lack:Peason = {
name:'abd',//约束tom必须和接口一样的属性
age:30
}
// 多个任意类型可写可不写
interface Teacher{
name: string;
age?:number;
[propName:string]:any //propName是自己随便定义的 string是必须是这个值，不能是number
}
let t1:Teacher = {
name:'wang',
age:34,
school: '清华'
}
//
interface Cat{
readonly name:string;//只读属性只能赋值一次，后期不能重复定义，可以获取
color:string;
age:number;
}
let c1:Cat={
name: 'mimi',
color: 'red',
age: 1
}
// c1.name = 'bo'//会报错
// implements 类实现接口的关键词
class SmallCat implements Cat{//定义一个SmallCat类，继承cat
name:string = '小猫';
color:string = 'red';
age:number = 2;
constructor(){//设置构造函数
}
}
let c2 = new SmallCat()
console.log(c2.name) //c2的name也是只读属性，因为继承了cat，不能修改，只能获取
数组定义类型
// 设定数组定义类型
let arr = [1,2,3]//普通定义方法
// 写法一 普通的
let arr1:number[] = [1,2,3]//ts定义数组类型，在传入不能是别的类型
// 写法二 数组泛型的定义类型
let arr2:Array<number> = [1,2,3]
// arr1.push('str')//报错
// 写法三 接口表示数组类型 一般不用
interface NumArr{
[index:number]:number
}
let arr3:NumArr = [1,2,3]
// arr2.push('str')//报错
创建组件
ng -g component components/header
会自动创建components/header 根组件也给定义好了，别的页面引用 找header.component.ts里面selector的名字app-header；根组件引用<app-header></app-header>
定义类型推荐使用：public stu:string='str'
组件引入图片
方法直接不加逗号分号
搜索记录功能 todolist
数据持久化 刷新不变化
dom侧边栏动画
获取子组件方法（viewchild）
父子组件传值
生命周期函数 有init的都触发一次
封装异步请求
多次执行
返回偶数
请求
jsonp跨域
router路由
来源：https://www.cnblogs.com/yaoling/p/14106208.html |
发表于 2020-12-8 23:03:00
