UTS
Section 1: Getting Started with Typescript
Typescript is like a friend sitting behind you while you code, helping you catch errors.
INSTALL
npm install -g typescript ts-node
TEST
tsc --help
Visual Studio TypeScript Optimal Install
- Add code to Path
View > Command Pallet > search "install path" - Add prettier (via extensions)
- Run prettier on save
Code > Settings > search "Format on save" - Use Single Quotes with Prettier
4 – Our First App
- Look at API
- Mkdir
- make package.json
- install axios for requests
- write code!
RUN THE THING!
ts-node index.ts
8 – Catching Errors with Type Script
BEFORE
import axios from "axios";
const url = "https://jsonplaceholder.typicode.com/todos/1";
axios.get(url).then((response) => {
const todo = response.data;
console.log(`
The Todo with ID: ${todo.id}
With the title of: ${todo.title}
Is completed? ${todo.completed}
`);
});
AFTER PT ONE
import axios from "axios";
const url = "https://jsonplaceholder.typicode.com/todos/1";
interface Todo {
id: number;
title: string;
completed: boolean;
}
axios.get(url).then((response) => {
const todo = response.data as Todo;
const id = todo.id;
const title = todo.title;
const completed = todo.completed;
console.log(`
The Todo with ID: ${id}
With the title of: ${title}
Is completed? ${completed}
`);
});
AFTER PT TWO
import axios from "axios";
const url = "https://jsonplaceholder.typicode.com/todos/1";
interface Todo {
id: number;
title: string;
completed: boolean;
}
axios.get(url).then((response) => {
const todo = response.data as Todo;
const id = todo.id;
const title = todo.title;
const completed = todo.completed;
logTodo(id, title, completed);
});
const logTodo = (id: number, title: string, completed: boolean) => {
console.log(`
The Todo with ID: ${id}
With the title of: ${title}
Is completed? ${completed}
`);
};
Section 2: What is a Type System?
FLATLIST!!
PROPS:
- horizontal: changes scroll direction from vertical to horizontal
- showsHorizontalScrollIndicator={false}: removes the scroll bar from the bottom
EXAMPLE:
<FlatList
horizontal
showsHorizontalScrollIndicator={false}
keyExtractor={(friend) => friend.name}
data={friends}
renderItem={({ item }) => <Text style={styles.textStyle}>{item.name}</Text>}
/>