ts安装和写法 angular安装及使用

菩提果 發表於 2020-12-8 23:03:00

1、全局安装
<div class="cnblogs_code">
<pre>npm install -g typescript</pre>
</div>
2、将ts编译成js
<div class="cnblogs_code">
<pre>tsc 文件名.ts //找到文件目录</pre>
</div>
注：可能这里会报错  参考下图
<img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201208202056850-518665400.png">
 
ts包容性不错如果str没加string编译报错，但是可以正确转换成js
<div class="cnblogs_code">
<pre>function abc(person:string){
return 'hello '+person
}
let str:string = '123'
console.log(abc(str))</pre>
</div>
转换以后
<div class="cnblogs_code">
<pre>function abc(person) {
return 'hello ' + person;
}
var str = '123';
console.log(abc(str));</pre>
</div>
3、安装angular-cli
<div class="cnblogs_code">
<pre>npm install -g @angular/cli</pre>
</div>
4、创建项目
<div class="cnblogs_code">
<pre>ng new 项目名字(英文)</pre>
</div>
router 安装和是否用less自己选择
5、运行项目
<div class="cnblogs_code">
<pre>ng serve --open</pre>
</div>
6、项目中平时改动的地方是src里面的app，其他的很少动，package.json是项目的依赖
app.module.ts是根模块  用到的组件都要导入进来且声明
<div class="cnblogs_code">
<pre>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: //挂在的根组件，就是首页是哪个放那个
})
export class AppModule { }</pre>
</div>
7、typescript 数据类型
原始数据类型：数值布尔字符串 null undefind
布尔类型定义
<div class="cnblogs_code">
<pre>let isData:boolean = true
isData = false let isData:boolean = Boolean(2)直接调用Boolean是可以的 </pre>
</div>
错误写法:因为new Boolean返回的是一个对象类型
let isData:boolean = new Boolean(2)
数值类型定义
<div class="cnblogs_code">
<pre>let num:number = 1
let num16:number = 0xf00a
let nonNum:number = NaN
let infiNum:number = Infinity</pre>
</div>
字符串类型定义
<div class="cnblogs_code">
<pre>let lname:string = 'joy';
let age:number = 30;
let box:string = `我的年龄是${age}`;
// 空值void大多数定义函数没有返回值，一般不用于定义变量，因为一旦变量定义为void，赋值只能是undefined或者null
function hello():void{
console.log('holle')
}</pre>
</div>
null和undefined定义  没什么意义，他们是所有类型的子类型
例如
<pre>let lname:string = 'joy'; lname=undefined lname=null</pre>
<div>
<div>//没啥意义</div>
<div>let a:undefined = undefined</div>
<div>a=null</div>
<div>let b:null = null</div>
<div>b=undefined</div>
<div>void类型是不能赋值给其他类型的，虽然他也只有undefined和null</div>
<div>
let lname:string = 'joy';
lname=undefined
let abc:undefined = undefined
let dfe:void = undefined
lname = abc
lname = dfe //这样不允许因为dfe是void类型
任意值类型：any用来表示任意值类型赋值
<div class="cnblogs_code">
<pre>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 // 报错</pre>
</div>
联合类型
表示取值可以取多个
<div class="cnblogs_code">
<pre>// 联合类型
let cat:string|number;
cat = 123
cat = '猫'
let cat1:string|number = '猫咪';</pre>
</div>
ts接口  定义接口关键词 interface
接口：行为的抽象。具体的行动由类实现（接口抽象出来的内容）相当于定义的描述
<div class="cnblogs_code">
<pre>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;
: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，不能修改，只能获取</pre>
</div>
数组定义类型
<div class="cnblogs_code">
<pre>// 设定数组定义类型
let arr = [1,2,3]//普通定义方法

// 写法一普通的
let arr1:number[] = [1,2,3]//ts定义数组类型，在传入不能是别的类型
// 写法二数组泛型的定义类型
let arr2:Array<number> = [1,2,3]

// arr1.push('str')//报错

// 写法三接口表示数组类型一般不用
interface NumArr{
:number
}
let arr3:NumArr = [1,2,3]
// arr2.push('str')//报错</pre>
</div>
 
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209095505787-593871880.png">
 
<img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209095524994-1901952437.png">
 
 
 创建组件
ng -g component components/header
会自动创建components/header  根组件也给定义好了，别的页面引用找header.component.ts里面selector的名字app-header；根组件引用<app-header></app-header>
定义类型推荐使用：public stu:string='str'
<img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209100308558-2048503437.png">
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209100616804-494556254.png">
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209100640692-1042117754.png">
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209102059795-750227278.png">
 
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209102538551-1842285097.png">
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209102612630-4619285.png">
 
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209103207884-260904566.png"><img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209103235788-1116445454.png"><img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209103719272-935042444.png">
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209104302013-1051576619.png"><img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209104317395-731527555.png">
 
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209104532802-313460729.png"><img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209104606344-190176102.png">
 
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209104720256-163929821.png"><img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209104855268-1748514002.png">
组件引入图片
<img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209115209782-1316698109.png"><img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209115345174-66271600.png">
 
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209115626224-1510425739.png">
<img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209115911489-834653411.png">
 
 
<img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209115848744-1337129908.png">
<img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209120119621-1039406895.png"><img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209120259691-2113388514.png">
 
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209120609025-608403580.png">
 
<img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209120711009-1976924824.png">
 
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209120925126-1385159372.png">
方法直接不加逗号分号   
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209121327447-337550182.png"><img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209122450101-1663963300.png"><img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209122750517-1827780290.png">
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209123106692-1907078887.png"><img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209123127907-1199662546.png">
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209134826772-1944257389.png">
 
 
<img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209135135527-1910736127.png">
<img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209140402328-796442708.png">
<img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209140458273-184626533.png">
 
搜索记录功能 todolist
<img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209142546006-563288473.png">
<img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209142626824-1170002660.png"><img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209143804514-1033589860.png">
 
 
 
 
<img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209143727840-19950235.png">
数据持久化  刷新不变化
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209144057560-22833290.png">
<img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209144725767-321533351.png">
<img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209145211702-1907646484.png">
 
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209145955890-270453177.png">
<img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209150114297-809901836.png">
<img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209150150892-1274528816.png">
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209150332047-1643063862.png">
 dom侧边栏动画
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209153519575-1964506316.png"><img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209153626127-1454869792.png">
 
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209153652252-1636098234.png">
 
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209154908261-1283861087.png">
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209154958612-1111900694.png">
 
 获取子组件方法（viewchild）
<img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209155941943-25344761.png"><img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209160000739-1658199817.png"><img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209160025682-534392606.png">
父子组件传值
<img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209161418334-1260319456.png">
 
 
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209161429850-154408055.png">
 
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209182012428-657977959.png">
 
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209182055649-193249745.png">
<img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209182159247-1641170021.png">
生命周期函数  有init的都触发一次
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209183341823-340068554.png">
封装异步请求
 
<img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209205053491-760542636.png"><img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209205125223-774661735.png">
 
<img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209205307625-1436187494.png">
 
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209205329031-1181524188.png">
 
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209205516321-1646379056.png">
多次执行
<img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209205609761-484958738.png">
 
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209210117138-1966385314.png">
 
 返回偶数
<img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209210314229-1720607268.png"><img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209210439668-310495612.png">
 
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209210518722-1210722362.png">
 
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209210815348-1287269363.png">
 
 请求
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209211138975-590491382.png">
 
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209211224580-1489010959.png">
 
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209211647791-487006522.png">
 
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209211742441-1971629845.png">
 
jsonp跨域
<img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209212840120-308520308.png">
router路由
<img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209215523577-378001216.png">
 
 
 <img src="https://img2020.cnblogs.com/blog/930484/202012/930484-20201209215430529-1569850336.png">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</div>
</div> 
来源：https://www.cnblogs.com/yaoling/p/14106208.html

頁: [1]

琼殿技术论坛's Archiver

ts安装和写法 angular安装及使用