# 🏅 Week2 - typescript 練習
**本週學習重點 (p12 ~ p23) :**
1. 型別斷言 ( Type Assertion / Casting ) ( any 與其他型別的關係/雙重斷言 )
2. type
3. Template Literal Types 字符串字面值
4. tuple 元祖
5. enum 枚舉

<br>

---
### 練習：typescript 本週重點觀念習題
**題目一** (tuple)
Give this type alias:

type Car = [string];

// option A
    const vehicle:Car = ['Toyota', 'Prius', 'Used']

// option B
    const vehicle:Car = []

// option C
    const vehicle:Car = ['Toyota']

// option D
    const vehicle:Car = ['Toyota', 'Prius']

**題目二** (Template Literal Types)
Create a literal type called SkillLevel
There are 4 allowed values: "Beginner", "Intermediate", "Advanced", and "Expert"

**題目三** (type)
Create a type called SkiSchoolStudent
name must be a string
age must be a number
port must be "ski" or "snowboard"
level must be a value from the SkillLevel type (from above)

**題目四** (type)
Define a type to represent an RGB color
r should be a number
g should be a number
b should be a number

Define a type to represent an HSL color
h should be a number
s should be a number
l should be a number

Create an array called colors that can hold a mixture of RGB and HSL color types

**題目五** (type)
Write the Movie type alias to make the following two variables properly typed
Make sure that "originalTitle" is optional and "title" is readonly

const dune: Movie = {
  title: "Dune",
  originalTitle: "Dune Part One",
  director: "Denis Villeneuve",
  releaseYear: 2021,
  boxOffice: {
    budget: 165000000,
    grossUS: 108327830,
    grossWorldwide: 400671789,
  },
};

const cats: Movie = {
  title: "Cats",
  director: "Tom Hooper",
  releaseYear: 2019,
  boxOffice: {
    budget: 95000000,
    grossUS: 27166770,
    grossWorldwide: 73833348,
  },
};

**題目六** (type, function)
Write a function called getProfit that accepts a single Movie object ( from question 5 )
It should return the movie's worldwide gross minus its budget
For example...
getProfit(cats) => -21166652

**題目七** (casting)
1. Cast the "unknown" variable myVar as a string, using the as keyword:
2. Cast the "unknown" variable myVar as a string, using < >:

// please fill in the correct answers in the "blank" spaces separetely 
let myVar: unknown = "Hello world!";
console.log("blank".length)

**題目八** (tuple)
1. The order of value types does not matter for Tuples: (true/false)
2. Define ourTuple as string and boolean, in that order:

// please fill in the correct answers in the "blank" spaces separetely 
let ourTuple: [ 'blank', 'blank' ];

**題目九** (casting)

We wrote a code snippet that includes a variable assignment using a DOM selector method and added code to disable a button. However, a type error occurred stating "Property 'disabled' does not exist on type 'Element.'" It seems the inferred type does not include the 'disabled' property. Please assist in using type assertion with 'as' and 'angle-bracket syntax <>' separately to assert the correct type 'HTMLButtonElement' into the code editor below.

 const button = document.querySelector(".go");
 
if (button) {
  button.disabled = true;  //  Property 'disabled' does not exist on type 'Element'
}
 
.

**題目十** (enum)

If you want to build something using a Raspberry Pi, you'll probably use resistors. For this exercise, you need to know only three things about them:

Each resistor has a resistance value.

Resistors are small - so small in fact that if you printed the resistance value on them, it would be hard to read. To get around this problem, manufacturers print color-coded bands onto the resistors to denote their resistance values.

Each band acts as a digit of a number. For example, if they printed a brown band (value 1) followed by a green band (value 5), it would translate to the number 15. In this exercise, you are going to create a helpful program so that you don't have to remember the values of the bands. The program will take 3 colors as input, and outputs the correct value, in ohms. The color bands are encoded as follows:

Black: 0

Brown: 1

Red: 2

Orange: 3

Yellow: 4

Green: 5

Blue: 6

Violet: 7

Grey: 8

White: 9

In resistor-color duo you decoded the first two colors. For instance: orange-orange got the main value 33. The third color stands for how many zeros need to be added to the main value. The main value plus the zeros gives us a value in ohms. For the exercise it doesn't matter what ohms really are. For example:

orange-orange-black would be 33 and no zeros, which becomes 33 ohms.
orange-orange-red would be 33 and 2 zeros, which becomes 3300 ohms.
orange-orange-orange would be 33 and 3 zeros, which becomes 33000 ohms.
(If Math is your thing, you may want to think of the zeros as exponents of 10. If Math is not your thing, go with the zeros. It really is the same thing, just in plain English instead of Math lingo.)

This exercise is about translating the colors into a label:

"... ohms"

So an input of "orange", "orange", "black" should return:

"33 ohms"

When we get to larger resistors, a [metric prefix](https://en.wikipedia.org/wiki/Metric_prefix) is used to indicate a larger magnitude of ohms, such as "kiloohms". That is similar to saying "2 kilometers" instead of "2000 meters", or "2 kilograms" for "2000 grams".

For example, an input of "orange", "orange", "orange" should return:

"33 kiloohms"

---

<!-- 答案網址: https://codepen.io/bruno-yu/pen/ZEwqxZQ -->
| 名稱 | 回報網址 |
| -------- | :--------: |
| Bruno | [codepen](https://codepen.io/bruno-yu/pen/qBgJYBP) |
| 真真 | [codepen](https://codepen.io/JudithCrocodile/pen/XWOQEvx?editors=0011) |
| 家欣 | [codepen](https://codepen.io/scwlvjdw-the-bashful/pen/jOdRqvP?editors=1011)|
|| |

---